<template>
  <div class="container">

    <!-- 面包屑导航 -->
<!--    <navbar></navbar>-->
    <div class="content page-title">
      <h2>首页</h2>
    </div>
    <div class="content search-content">
      <search-com  type="" @outputSearchData="receiveSearchData" @searchBasic="getStatistics($event)"></search-com>
    </div>
    <div class="content" v-loading="baseData.loading">
      <!-- <h3 class="card-title">基础数据</h3> -->
      <div class="base-data-list">
        <template class="base-data-item" v-for="(item, index) in baseData.list">
          <basic-data :basicDataItem="item" :basicDataItemIndex="index" :key="index"></basic-data>
        </template>
      </div>
    </div>
    <div class="content sale-chart">
      <!--      销售总额7天变化趋势-->
      <div class="sale-chart-left">
        <h3 class="card-title">
          <label>
          {{ trend.title }}
            <el-tooltip class="item" effect="dark" content="订单应收总额，不含未提交、取消、审核不通过订单金额数" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
        </label>
          <div class="staff-button-list">
            <search-com-company class="search-company" type="company"
                                :dateArr="trend.dateArr"
                                @outputSearchData="receiveSearchData" :type="trend.type"></search-com-company>
          </div>
        </h3>
        <div class="card-body" v-loading="trend.loading">
          <total-sales :config="trend.config" :baseData="trend.baseData" :dataList="trend.dataList"></total-sales>
        </div>
      </div>
      <div class="sale-chart-right" v-loading="staffTableConfigs.loading">
        <!--        <h3 class="card-title"><label>下单金额分布占比</label></h3>-->
        <!--        <distribution :config="orderAmount.config" :dataList="orderAmount.dataList"></distribution>-->
        <h3 class="card-title">
          <label>
            员工排行榜
            <el-tooltip class="item" effect="dark" content="不含未提交及已关闭、审核不通过的订单数据" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </label>
          <div class="staff-button-list">
            <el-button size="small" @click="onDownload('staff')" class="download-table"
                       icon="el-icon-download"></el-button>
          </div>
        </h3>
        <search-com-company class="search-company" type="company"
                            :type="staffTableConfigs.type"
                            :dateArr="staffTableConfigs.dateArr"
                            @outputSearchData="receiveSearchData"></search-com-company>

        <data-board-table :dataList="staffTableConfigs.list" :config="staffTableConfigs.config"
                          :heightStr="staffTableConfigs.heightStr"
                          :sortObj="orgCodeTableConfigs.sortObj"></data-board-table>
          <el-pagination
              @size-change="rankingCurrentChange"
              @current-change="rankingCurrentChange"
              :current-page="staffTableConfigs.page.pageNo"
              :page-size="staffTableConfigs.page.pageSize"
              layout="total, prev, pager, next"
              :total="staffTableConfigs.page.totalNum">
          </el-pagination>
      </div>
    </div>
    <div class="content achievement" v-loading="staffTableAchievement.loading">
      <h3 class="card-title">
        <label>近一年员工业绩
        <el-tooltip class="item" effect="dark" content="不含未提交及已关闭、审核不通过的订单数据" placement="top">
        <i class="el-icon-question"></i>
      </el-tooltip></label>

        <div class="staff-button-list">
          <!--          <el-button size="small" :type="currentChooseStaff == item.value? 'primary':'info'" plain v-for="item in staffButtonList" @click="onChangeStaffType(item.value)">{{ item.name }} </el-button>-->
          <el-button size="small" @click="onDownload('achievement')" class="download-table"
                     icon="el-icon-download"></el-button>
        </div>

      </h3>
      <data-board-table :dataList="staffTableAchievement.list" :config="staffTableAchievement.config"
                        :sortObj="staffTableAchievement.sortObj" @tableShowDetail="showDetail"></data-board-table>
    </div>

    <!--========================== el-dialog =================================-->
    <el-dialog
        :title="dialog.title"
        :visible.sync="dialog.visible"
        :width="dialog.width"
        :append-to-body="true"
    >
      <template slot="title" v-if="dialog.subTitle">
        <div class="dialog-slot-title"><label>{{ dialog.title }}</label><span>( {{ staffTableAchievementDetail.month }} )</span>
        </div>
      </template>
      <!-- 员工业绩统计-->
      <template v-if="dialog.type === 'performanceStatistics'">
        <data-board-table v-loading="loading" :dataList="staffTableAchievementDetail.page.list"
                          :config="staffTableAchievementDetail.list"
                          :sortObj="staffTableAchievementDetail.sortObj"></data-board-table>
        <!-- 员工业绩统计 分页start -->
<!--        <div class="page" v-if="staffTableAchievementDetail.page.totalNum >= 10">-->
        <div class="page">
          <el-pagination
              background
              @size-change="staffDetailSizeChange"
              @current-change="staffDetailCurrentChange"
              :current-page="staffTableAchievementDetail.page.pageNo"
              :page-sizes="[3, 5, 10, 20, 50]"
              :page-size="staffTableAchievementDetail.page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="staffTableAchievementDetail.page.totalNum"
          >
          </el-pagination>
        </div>
        <!-- 员工业绩统计 分页end -->
        <el-button size="small" type="primary" plain class="performanceStatistics-download"
                   @click="onDownload('achievementDetail')">下载
        </el-button>
      </template>

    </el-dialog>
    <!--=========================== el-dialog end================================-->
  </div>
</template>

<script>
import navbar from '@/components/navbar.vue'
import SearchCom from './components/SearchCom.vue'
import SearchComCompany from './components/SearchComCompany.vue'
import BasicData from './components/BasicData.vue'
import TotalSales from './components/TotalSales.vue'
import DataBoardTable from './components/DataBoardTable.vue'
import Distribution from './components/Distribution.vue'
import Comparison from './components/Comparison.vue'
import TopSale from './components/TopSale.vue'
import dataBoardCommon from './mixins/dataBoardCommon'

import { getDateRange } from '@/utils/index.js'

export default {
  mixins: [dataBoardCommon],
  components: {
    navbar,
    SearchCom,
    SearchComCompany,
    BasicData,
    TotalSales,
    Distribution,
    DataBoardTable,
    Comparison,
    TopSale
  },
  data () {
    return {
      loading: false,
      basicDays: 1, // 基础数据默认天数
      page: { list: [], pageNo: 1, pageSize: 8, totalNum: 0, currentPage: 1 },
      baseData: {
        loading: false,
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        userId: '', // 当前用户ID
        list: [
          { title: '销售总额', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '888.88', increase: 75.00 },
          { title: '订单数', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '888.88', increase: -5.01 },
          { title: '货到付款订单数', dateArr: ['2022-06-02', '2022-06-02'], totalNumber: '888.88', increase: 55.00 },
          { title: '签收率', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '888.88', increase: -15 }
        ]
      },
      staffTableConfigs: { // 员工排行榜
        loading: false,
        type: 'staffTable',
        heightStr: '435',
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        page: { list: [], pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1 },
        sortObj: { prop: 'totalAmountSales', order: 'descending' }, // 排序
        config: [
          { type: 'index', label: '排名', width: 55 },
          { prop: 'reallyName', label: '姓名', width: 50 },
          { prop: 'totalAmountSales', label: '销售额', sortable: true, slot: 'money' },
          { prop: 'afterOrderNum', label: '售后订单数', width: 60, sortable: true },
          { prop: 'orderNum', label: '订单数', width: 60, sortable: true }
        ],
        list: []
      },
      imageArr: [], // 列表有图片时使用
      orgCodeTableConfigs: { // 各部门销售情况
        loading: false,
        sortObj: { prop: 'categoryId', order: 'descending' }, // 排序
        list: [
          { type: 'index', label: '序号', width: 60 },
          { prop: 'brandName', label: '公司部门' },
          { prop: 'goodsNo', label: '购买订单数' },
          { prop: 'stock', label: '购买人数' },
          { prop: 'marketPrice', label: '销售额', sortable: true },
          { prop: 'categoryId', label: '客单价', sortable: true }
        ]
      },
      screenWidth: document.body.clientWidth,
      staffTableAchievement: { // 近一年员工业绩
        loading: false,
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        sortObj: { prop: 'marketPrice', order: 'descending' }, // 排序
        config: [
          { prop: 'submitDate', label: '时间', align: 'left' },
          { prop: 'placeOrderNum', label: '下单数', align: 'left' },
          { prop: 'approveOrderNum', label: '待审核订单数', width: 135, align: 'left' },
          { prop: 'oldPlaceOrderNum', label: '老客下单数', width: 130, align: 'left' },
          { prop: 'newPlaceOrderNum', label: '新客下单数', width: 130, align: 'left' },
          { prop: 'newPlaceOrderNumRate', label: '新客下单率', width: 130, align: 'left' },
          { prop: 'oldPlaceOrderNumRate', label: '历史统计复购率', width: 135, align: 'left' },
          { prop: 'placeOrderTotalMoney', label: '下单金额', width: 130, align: 'left' },
          { prop: 'oldPlaceOrderTotalMoney', label: '老客下单金额', width: 130, align: 'left' },
          { prop: 'newPlaceOrderTotalMoney', label: '新客下单金额', width: 130, align: 'left' },
          { prop: 'oldPlaceOrderTotalMoneyRate', label: '老客下单金额占比', width: 135, align: 'left' },
          { prop: 'newPlaceOrderTotalMoneyRate', label: '新客下单金额占比', width: 135, align: 'left' },
          { prop: 'operate', label: '操作', slot: 'button', fixed: 'right', width: 120, align: 'left' }
        ],
        list: []
      },
      staffTableAchievementDetail: { // 近一年员工业绩 - 详细
        loading: false,
        month: '', // 月份
        page: { list: [], pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1 }, // 员工业绩统计(XX年XX月)
        sortObj: { prop: 'marketPrice', order: 'descending' }, // 排序
        list: [
          { prop: 'teamName', label: '项目/团队' },
          { prop: 'groupName', label: '组别' },
          { prop: 'userName', label: '姓名' },
          { prop: 'payPlaceOrderNumNum', label: '支付下单数', sortable: true, slot: 'payPlaceOrderNum' },
          { prop: 'approveOrderNum', label: '待审核订单数', sortable: true, slot: 'approveOrderNum' },
          { prop: 'oldPlaceOrderNumNum', label: '老客下单数', sortable: true, slot: 'oldPlaceOrderNum' },
          { prop: 'newPlaceOrderNumNum', label: '新客下单数', sortable: true, slot: 'newPlaceOrderNum' },
          { prop: 'newPlaceOrderNumRateNum', label: '新客下单率', sortable: true, slot: 'newPlaceOrderNumRate' },
          { prop: 'oldPlaceOrderNumRateNum', label: '历史统计复购率', sortable: true, slot: 'oldPlaceOrderNumRate' },
          { prop: 'placeOrderTotalMoneyNum', label: '下单金额', align: 'right', sortable: true, slot: 'placeOrderTotalMoney' },
          { prop: 'oldPlaceOrderTotalMoneyNum', label: '老客下单金额', align: 'right', sortable: true, slot: 'oldPlaceOrderTotalMoney' },
          { prop: 'newPlaceOrderTotalMoneyNum', label: '新客下单金额', align: 'right', sortable: true, slot: 'newPlaceOrderTotalMoney' },
          { prop: 'oldPlaceOrderTotalMoneyRateNum', label: '老客下单金额占比', sortable: true, slot: 'oldPlaceOrderTotalMoneyRate' },
          { prop: 'newPlaceOrderTotalMoneyRateNum', label: '新客下单金额占比', sortable: true, slot: 'newPlaceOrderTotalMoneyRate' }
        ]
      }
    }
  },
  mounted () {
    this.$nextTick(_ => {
      console.log('mounted this.$nextTick')
    })
  },
  created () {
    // 获取默认数据
    this.fetchDefaultData()
  },
  beforeRouteLeave (to, form, next) {
    document.onkeydown = null
    next()
  },
  activated () {
    // this.brandSelect();
    // this.brandSelectBox();
  },
  watch: {
    /* 监听*/
    screenWidth (val) {
      this.screenWidth = val
      console.log('this.screenWidth', this.screenWidth)
      this.windowOnresize()
    }
  },
  methods: {
    // 获取默认数据
    fetchDefaultData () {
      this.getEmployeeRanking(true) // 员工排行榜
      this.getOneYear(true) // 近一年员工业绩
      this.getStatistics(true) // 首页销售数据统计
    },
    // 员工排行榜
    getEmployeeRanking (isDefault, dateArr, orgCodeArrStr) {
      if (isDefault || dateArr) {
        this.staffTableConfigs.loading = true
      } else {
        return
      }
      // const defaultOrgCode = this.userInfo.orgCode
      this.staffTableConfigs.orgCode = orgCodeArrStr ? orgCodeArrStr : this.userInfo.orgCode
      console.log(orgCodeArrStr)


      let days = 30
      if (isDefault) { // 默认
        const currentMonth = getDateRange('month')
        // this.staffTableConfigs.dateArr = this.defaultDateTime(days)
        this.staffTableConfigs.dateArr[0] = currentMonth.startDate
        this.staffTableConfigs.dateArr[1] = currentMonth.enDate
        // console.log(this.staffTableConfigs.dateArr)
      } else { // 选择
        this.staffTableConfigs.dateArr = this.chooseDateTime(dateArr)
        console.log(this.staffTableConfigs.dateArr)
        if (this.staffTableConfigs.dateArr[0].indexOf('undefined') > -1) {
          this.staffTableConfigs.dateArr = this.defaultDateTime(days)
        }
        days = this.staffTableConfigs.dateArr[2]
      }
      const params = {
        pageNo: this.staffTableConfigs.page.pageNo,
        pageSize: this.staffTableConfigs.page.pageSize,
        startTime: this.staffTableConfigs.dateArr[0],
        endTime: this.staffTableConfigs.dateArr[1],
        orgCode: this.staffTableConfigs.orgCode
        // orgCode: 'DT374265477'
      }
      this.$api.employeeRanking(params).then((res) => {
        this.staffTableConfigs.loading = false
        if (res.code == 0) {
          const resData = res.data.list
          resData.forEach(item => {
            item.afterOrderNum = Number(item.afterOrderNum)
            item.orderNum = Number(item.orderNum)
            item.rowNum = Number(item.rowNum)
            item.totalAmountSales = Number(item.totalAmountSales)
            item.moneyFormat = '￥' + this.formatNumber(item.totalAmountSales, 2)
            // console.log(item.moneyFormat)
          })
          this.staffTableConfigs.list = resData
          this.staffTableConfigs.page.totalNum = res.data.totalNum
        }
      }).catch((err) => {
        this.staffTableConfigs.loading = false
        console.log(err)
      })
    },
    // ****************** 员工排行榜 翻页 ******************
    rankingCurrentChange (currentChange) {
      this.staffTableConfigs.page.pageNo = currentChange
      this.getEmployeeRanking(false, this.staffTableConfigs.dateArr, this.staffTableConfigs.orgCode)
      console.log(currentChange, '员工排行榜')
    },
    rankingSizeChange (sizeChange) {
      this.staffTableConfigs.page.pageNo = 1
      this.staffTableConfigs.page.currentPage = 1
      this.staffTableConfigs.page.pageSize = sizeChange
      this.getEmployeeRanking(false, this.staffTableConfigs.dateArr, this.staffTableConfigs.orgCode)
    },
    // ****************** 员工排行榜 翻页 end ******************
    // 近一年员工业绩
    getOneYear (isDefault, dateArr) {
      const params = {}
      this.$api.oneYear(params).then((res) => {
        if (res.code == 0) {
          const resData = res.data
          resData.forEach(item => {
            for (const itemKey in item) {
              // 日期不处理
              if (itemKey === 'submitDate') {
                continue
              }
              // 下单数、老客下单数、 新客下单数
              if (itemKey === 'placeOrderNum' || itemKey === 'oldPlaceOrderNum' || itemKey === 'newPlaceOrderNum') {
                item[itemKey] = this.formatNumber(item[itemKey])
              }
              // 下单金额、 老客下单金额、 新客下单金额
              if (itemKey === 'placeOrderTotalMoney' || itemKey === 'oldPlaceOrderTotalMoney' || itemKey === 'newPlaceOrderTotalMoney') {
                item[itemKey] = this.formatNumber(item[itemKey], 2)
              }
              // 新客下单率、 复购率、 老客下单金额占比、 新客下单金额占比
              if (itemKey === 'newPlaceOrderNumRate' || itemKey === 'oldPlaceOrderNumRate' || itemKey === 'oldPlaceOrderTotalMoneyRate' || itemKey === 'newPlaceOrderTotalMoneyRate') {
                item[itemKey] = `${this.formatNumber(item[itemKey], 2)}%`
              }
            }
          })
          this.staffTableAchievement.list = resData
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // ****************** 员工业绩统计 翻页 ******************
    staffDetailCurrentChange (currentChange) {
      this.staffTableAchievementDetail.page.pageNo = currentChange
      this.getSelectEmployeeKpi()
      console.log(currentChange, 'currentChange')
    },
    staffDetailSizeChange (sizeChange) {
      this.staffTableAchievementDetail.page.pageNo = 1
      this.staffTableAchievementDetail.page.currentPage = 1
      this.staffTableAchievementDetail.page.pageSize = sizeChange
      this.getSelectEmployeeKpi()
    },
    // ****************** 员工业绩统计 翻页 end ******************
    // 首页销售数据统计
    getStatistics (isDefault) {
      this.baseData.loading = true
      // days 1 今天
      // days 1001 昨天
      // days 1070 过去七天
      // days 1071 本周
      // days 1031 本月
      // days 10000 自定义时段
      // debugger
      const days = this.basicDays
      if (isDefault || days === 1 || days === 1001) { // 默认 今天 昨天
        this.baseData.dateArr = this.defaultDateTime(days)
      } else if (days === 1071) { // 本周
        const dateRange = getDateRange('week')
        this.baseData.dateArr[0] = dateRange.startDate
        this.baseData.dateArr[1] = dateRange.enDate
        console.log('本周，日期范围', this.baseData.dateArr)
      } else if (days === 1031) { // 本月
        const dateRange = getDateRange('month')
        this.baseData.dateArr[0] = dateRange.startDate
        this.baseData.dateArr[1] = dateRange.enDate
        console.log('本月，日期范围', this.baseData.dateArr)
      } else { // 选择
        console.log(this.baseData.dateArr)
        if (this.baseData.dateArr[0].indexOf('undefined') > -1) {
          if (days === 10000) {
            this.baseData.loading = false
            return this.$message.warning('请选择日期！')
          }
          this.baseData.dateArr = this.defaultDateTime(days)
        }
      }
      // debugger
      const tempOrgCode = this.baseData.orgCode
      if (tempOrgCode == 'undefined' || !tempOrgCode || !/[^\s]/.test(tempOrgCode)) {
        // 为空
        this.baseData.orgCode = this.userInfo.orgCode
      } else {
        // 不为空
        // console.log('有选择公司')
      }
      const params = {
        pageNo: 1, pageSize: 999,
        startTime: this.baseData.dateArr[0],
        endTime: this.baseData.dateArr[1],
        orgCode: this.baseData.orgCode,
        userId: isDefault ? '' : this.baseData.userId
      }
      this.$api.statistics(params).then((res) => {
        this.baseData.loading = false
        if (res.code == 0) {
          const resData = res.data
          resData.forEach(item => {
            item.title = item.kanbanName
            if (item.kanbanName.indexOf('总额') > -1) {
              item.totalNumber = `<label>${this.formatNumber(item.totalNumber, 2)}</label><span style="font-size: 25px;font-weight: 400;">元</span>`
              item.tip = `订单应收总额，不含未提交、取消、审核不通过的订单金额`
            }
            if (item.kanbanName.indexOf('订单数') > -1) {
              item.totalNumber = `<label>${this.formatNumber(item.totalNumber, 0)}</label><span style="font-size: 25px;font-weight: 400;">单</span>`
              // item.totalNumber = `<label>${this.formatNumber(item.totalNumber, 0)}</label>`
              // 订单数
              if (item.kanbanName.length === 3) {
                item.tip = `不含未提交、取消、审核不通过订单数`
              }
              // 货到付款订单数
              if (item.kanbanName.length === 7) {
                item.tip = `已提交和未被关闭、审核不通过的货到付款订单数`
              }
            }
            if (item.kanbanName.indexOf('签收率') > -1) {
              item.totalNumber = `<label>${this.formatNumber(item.totalNumber)}</label><span style="font-size: 25px;font-weight: 400;">%</span>`
              item.tip = `签收订单÷订单数（不含关闭订单及未提交、审核不通过订单）`
            }
            // item.totalNumber = item.prevTotalNumber
            // console.log(Number(item.increase))
            // item.increaseNum = Number(item.increase)
            item.increaseNum = isNaN(Number(item.increase)) ? 0 : Number(item.increase)
            item.increase = this.formatNumber(item.increase, 0)

            item.prevMonthIncreaseNum = isNaN(Number(item.prevMonthIncrease)) ? 0 : Number(item.prevMonthIncrease)
            item.prevMonthIncrease = this.formatNumber(item.prevMonthIncrease, 0)
          })
          this.baseData.list = resData
        }
      }).catch((err) => {
        console.log(err)
        this.baseData.loading = false
      })
    },
    onDownload (type) {
      this.loading = true
      let downloadFun, params = {}
      switch (type) {
        case 'trend': // 趋势
          console.log('趋势')
          break
        case 'staff': // 员工排行榜
          console.log('员工排行榜')
          downloadFun = this.$api.employeeRankingExport
          params = {
            pageNo: 1, pageSize: 999,
            startTime: this.staffTableConfigs.dateArr[0],
            endTime: this.staffTableConfigs.dateArr[1],
            orgCode: this.staffTableConfigs.orgCode
            // orgCode: 'DT374265477'
          }
          break
        case 'achievement': // 近一年员工业绩
          console.log('近一年员工业绩')
          downloadFun = this.$api.employeeOneYearExport
          params = {}
          break
        case 'achievementDetail': // 近一年员工业绩 - 详细
          console.log('近一年员工业绩 - 详细')
          params = {
            orderTime: this.staffTableAchievementDetail.month
          }
          downloadFun = this.$api.selectEmployeeKpiExport
          break
        default:
          console.log('onDownload')
      }
      downloadFun(params).then((res) => {
        if (res.code === 0) {
          this.downloadlink(res.data)
        }
        this.loading = false
      }).catch((err) => {
        console.log(err)
        this.loading = false
      })
    },
    setElTable () { // 设置表格宽高
      const sWidth = this.screenWidth
      // console.log( sWidth )
      this.elTable.height = parseInt(sWidth / 3)
      /*
      if(sWidth > 1900){
        this.elTable.height = 800
      } else if (sWidth > 1600) {
        this.elTable.height = 800
      } else if (sWidth > 1200) {
        this.elTable.height = 600
      } else if (sWidth > 600) {
        this.elTable.height = 400
      }
      */
      // this.elTable.height = getScreenWidth
    }
  }
}
</script>

<style scoped lang="scss">
@import './assets/DataCoardCommon';

///deep/ .el-table th > .cell { text-align: unset; }
template {
  display: block;
}

h2 {
  position: relative;
  margin-bottom: 21px;
  padding-left: 11px;

  &:before {
    position: absolute;
    top: 4px;
    left: 0;
    display: inline-block;
    content: '';
    width: 4px;
    height: 17px;
    background-color: #2d7edf;
  }
}

.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {
  //background-color: #ecf5ff;
}

.dialog-slot-title {
  line-height: 24px;

  label {
    color: #333333;
    font-weight: bold;
    font-size: 18px;
    margin-right: 10px;
  }

  span {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
  }
}

/deep/ .el-table__body-wrapper .el-table__row .el-table__cell:first-child .cell {
  //color: #4168E7;
}

.sale-chart {
  .sale-chart-right {
    min-height: 557px;

    /deep/ .el-table__body-wrapper .el-table__row {
      &:first-child, &:nth-child(2), &:nth-child(3) {
        .el-table__cell:first-child .cell {
          color: #4168E7;
        }
      }
    }
    .el-pagination{
      text-align: center;
    }
  }
}

//近一年业绩
.achievement {
  .card-title {
    .staff-button-list {
      .el-button {
        margin-right: 10px;
      }
    }
  }

  ::v-deep.el-table th > .cell {
    text-align: unset;
  }

  ::v-deep.el-table .el-table__row td:first-child {
    text-align: left;
  }
  :deep(.has-gutter .el-table__cell .cell){
    //background-color: #FFBA00;
    text-align: center;
  }
}

.el-table__row {
  .el-table__cell {
    .cell {
      padding-left: 12px;
      padding-right: 12px;

      .el-image {
        width: 100px;
        height: 70px;
        overflow: hidden;

        /deep/ img {
          width: 100%;
          object-fit: cover;
        }
      }
    }
  }
}

//变化趋势
.sale-chart-left {
  .staff-button-list {
    .search-company {
      //width: 100% !important;
    }
  }
}

.page {
  text-align: right;
  width: 100%;
  //background: #f5f5f5;
  padding-right: 20px;
  //position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1000;
  margin-top: 10px;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
</style>
